<template>
  <div>
    <TreeSelect v-model="treeValue" :data="treeData" :placeholder="placeholder" clearable @on-change="onChange" />
  </div>
</template>

<script>
import { getOrgTree } from '@/api/organizationManage.js'

export default {
  name: 'organizationalTree',
  model: {
    prop: "value",
    event: "input",
  },
  props: {
    value: {
      type: String,
      default: '',
    },
    placeholder: {
      type: String,
      default: '请选择',
    },
  },
  watch: {
    value: {
      handler (val) {
        this.treeValue = val
      }
    },
  },
  data () {
    return {
      treeValue: '',
      treeData: []
    }
  },
  async created () {
    const res = await getOrgTree({ companyId: 'g', isShowCompanyDepartment: false, isIncludeOneself: true, isInclusionChildren: true })
    this.treeData = this.getTreeData(res)
  },

  methods: {
    onChange (e) {
      this.$emit('input', this.treeValue)
    },
    // 递归添加展开
    getTreeData (arr) {
      return arr.map(it => {
        if (it.childrenCompanyList && it.childrenCompanyList.length) {
          it.children = this.getTreeData(it.childrenCompanyList)
        }
        it.title = it.companyName
        it.value = it.companyId
        it.expand = true
        return it
      })
    }
  }
}
</script>

<style lang='less' scoped>
</style>
